<script context="module">
  export async function preload(page, session) {
    if (!session.user) {
      this.error(403, "对不起，请登录之后再使用发布功能！");
      return;
    }
    const response = await Promise.all([
      this.fetch("/api2/productcategories"),
    ]);
    const categories = await response[0].json();
    return { categories:categories.categories };
  }
</script>

<script>
  export let categories;
  let title = '';
  let counts = 0;
  let category = categories[0]._id || '';
  let brand = '';
  let pid = '';
  let disabled = false;
  let error;
  import { stores, goto } from "@sapper/app";
  const post = async () => {
    if (title.length == 0) {
      error = "商品名称为必填项！";
      return;
    }
    if (category.length == 0) {
      error = '分类为必填！';
      return;
    }
    disabled = true;
    const response = await fetch("/api2/product", {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
      body: JSON.stringify({
        title,
        counts,
        brand,
        pid,
        category
      }),
    }).catch((err) => {
      console.log(err);
      disabled = false;
    });
    disabled = false;
    const parsed = await response.json();
    if (parsed.success == 0) {
      error = parsed.message;
    } else if (parsed.success == 1) {
      await goto("/products");
    }
  };
</script>

<svelte:head>
  <title>新增商品</title>
</svelte:head>
<div class="panel-header panel-header-sm" />
<div class="content">
  <div class="row">
    <div class="col-md-4 order-md-1 mb-4">
      <div class="card shadow">
        <div class="card-header">
          <h5 class="title">提示</h5>
        </div>
        <div class="card-body">
          <p>一、分类为必填项。</p>
          <p>
            二、商品名称为必填！
          </p>
        </div>
      </div>
    </div>
    <div class="col-md-8 mx-auto">
      <div class="card shadow">
        <div class="card-header">
          <h5 class="title">新增商品</h5>
        </div>
        <div class="card-body">
          <form on:submit|preventDefault={post} action="post">
            <div class="form-group row">
              <label class="col-sm-2 col-form-label" for="title">名称</label
              >
              <div class="col-sm-10">
                <input
                  type="text"
                  id="title"
                  class="form-control"
                  placeholder="商品名称"
                  bind:value={title}
                />
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label" for="brand">品牌名</label
              >
              <div class="col-sm-10">
                <input
                  type="text"
                  id="brand"
                  class="form-control"
                  placeholder="商品品牌名"
                  bind:value={brand}
                />
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label" for="pid">商品编号/型号</label
              >
              <div class="col-sm-10">
                <input
                  type="text"
                  id="pid"
                  class="form-control"
                  placeholder="商品编号或型号，独一无二的编号"
                  bind:value={pid}
                />
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label" for="counts">数量</label
              >
              <div class="col-sm-10">
                <input
                  type="text"
                  id="counts"
                  class="form-control"
                  placeholder="数量"
                  bind:value={counts}
                />
              </div>
            </div>
            <div class="form-group row">
              <label class="col-sm-2 col-form-label" for="category">分类</label
              >
              <div class="col-sm-10">
                <select value={category} class="form-control" id="category">
                  {#each categories as category}
                    <option value={category._id}>{category.title}</option>
                  {/each}
                </select>
              </div>
            </div>
            <div class="form-group">
              <button type="submit" class="btn btn-primary" {disabled}
                >提交新增</button
              >
            </div>
          </form>
          {#if error}
            <div class="row">
              <div class="col-md-12">
                <p class="text-danger">{error}</p>
              </div>
            </div>
          {/if}
        </div>
      </div>
    </div>
  </div>
</div>
